<template>
    <slide-view
        class="d-view"
        :listenerIDs="['manager-main-container']"
        :noListenerIDs="['examine-table']"
        @side-close="hideView"
        :appendToBody="true"
        :body-style="{padding: '10px 30px', height: '100%'}"
    >
        <flexbox
            orient="vertical"
            style="height: 100%;"
        >
            <div class="header">
                <flexbox class="detail-header">
                    <div class="header-name">工资详情</div>
                    <img
                        @click="hideView"
                        class="header-close"
                        src="@/assets/img/task_close.png"
                    />
                </flexbox>
                <div class="detail-header-des" v-if="showData.status_text">
                    <el-tag>{{showData.status_text}}</el-tag>
                </div>
            </div>
            <div class="detail-body">
                <el-tabs v-model="tabsIndex" type="card">
                    <el-tab-pane
                        label="基本信息"
                        name="first"
                    >
                        <div class="dialog-content">
                            <flexbox class="content-items">
                                <div class="content-items-name">姓名：</div>
                                <div class="content-items-value">{{showData.realname}}</div>
                            </flexbox>
                            <flexbox class="content-items">
                                <div class="content-items-name">部门：</div>
                                <div class="content-items-value">{{showData.struc_name}}</div>
                            </flexbox>
                            <flexbox class="content-items">
                                <div class="content-items-name">职位：</div>
                                <div class="content-items-value">{{showData.position}}</div>
                            </flexbox>
                            <flexbox class="content-items">
                                <div class="content-items-name">基本工资(￥)：</div>
                                <div class="content-items-value">{{showData.base_pay}}</div>
                            </flexbox>
                            <flexbox class="content-items">
                                <div class="content-items-name">绩效金额(￥)：</div>
                                <div class="content-items-value">{{showData.achivement_money}}</div>
                            </flexbox>
                            <flexbox class="content-items">
                                <div class="content-items-name">个人绩效提成比例(%)：</div>
                                <div class="content-items-value">{{showData.royalty_ratio}}</div>
                            </flexbox>
                            <flexbox class="content-items">
                                <div class="content-items-name">绩效工资(￥)：</div>
                                <div class="content-items-value">{{showData.achivement_salary}}</div>
                            </flexbox>
                            <flexbox class="content-items">
                                <div class="content-items-name">部门绩效金额(￥)：</div>
                                <div class="content-items-value">{{showData.struc_achive_money}}</div>
                            </flexbox>
                            <flexbox class="content-items">
                                <div class="content-items-name">部门绩效提成比例(%)：</div>
                                <div class="content-items-value">{{showData.struc_royalty_ratio}}</div>
                            </flexbox>
                            <flexbox class="content-items">
                                <div class="content-items-name">部门绩效工资(￥)：</div>
                                <div class="content-items-value">{{showData.struc_achive_salary}}</div>
                            </flexbox>
                            <flexbox class="content-items">
                                <div class="content-items-name">个人业绩奖金(￥)：</div>
                                <div class="content-items-value">{{showData.bonus}}</div>
                            </flexbox>
                            <flexbox class="content-items">
                                <div class="content-items-name">部门业绩奖金(￥)：</div>
                                <div class="content-items-value">{{showData.struc_bonus}}</div>
                            </flexbox>
                            <!-- <flexbox class="content-items">
                                <div class="content-items-name">应发工资：</div>
                                <div class="content-items-value">{{showData.total_money}}</div>
                            </flexbox> -->
                            <flexbox class="content-items">
                                <div class="content-items-name">月份：</div>
                                <div class="content-items-value">{{showData.month}}</div>
                            </flexbox>
                            <flexbox class="content-items">
                                <div class="content-items-name">应发工资(￥)：</div>
                                <div class="content-items-value">
                                    <strong>
                                    <span>{{showData.base_pay}}</span>
                                    <span v-if="showData.achivement_money">+ {{showData.achivement_money}} x {{showData.royalty_ratio_text}}</span>
                                    <span v-if="showData.struc_achive_money">+ {{showData.struc_achive_money}} x {{showData.struc_royalty_ratio_text}}</span>
                                    <span v-if="showData.bonus">+ {{showData.bonus}}</span>
                                    <span v-if="showData.struc_bonus">+ {{showData.struc_bonus}}</span>
                                    <span>= {{showData.total_money}}</span>
                                    </strong>
                                </div>
                            </flexbox>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane
                        label="个人绩效"
                        name="second"
                        v-if="personAchievements.length > 0"
                    >
                        <div class="dialog-content">
                            <div class="total-label">业绩总额(￥)：{{personAchievementsTotal}}</div>
                            <el-table
                                class="main-table"
                                id="examine-table"
                                v-loading="loading"
                                :data="personAchievements"
                                :height="tableHeight"
                                highlight-current-row
                                style="width: 100%"
                            >
                                <el-table-column
                                    show-overflow-tooltip
                                    v-for="(item, index) in fieldList"
                                    :key="index"
                                    :prop="item.prop"
                                    :width="item.width"
                                    :label="item.label"
                                    :align="item.align"
                                >
                                    <template
                                        slot="header"
                                        slot-scope="scope"
                                    >
                                        <div class="table-head-name">{{scope.column.label}}</div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="p-contianer">
                                <el-pagination
                                    class="p-bar"
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="pageSizes"
                                    :page-size.sync="pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="total"
                                >
                                </el-pagination>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane
                        label="部门绩效"
                        name="third"
                        v-if="structureAchievements.length > 0"
                    >
                        <div class="dialog-content">
                            <div class="total-label">业绩总额(￥)：{{structureAchievementsTotal}}</div>
                            <el-table
                                class="main-table"
                                id="examine-table"
                                v-loading="loading1"
                                :data="structureAchievements"
                                :height="tableHeight"
                                highlight-current-row
                                style="width: 100%"
                            >
                                <el-table-column
                                    show-overflow-tooltip
                                    v-for="(item, index) in fieldList1"
                                    :key="index"
                                    :prop="item.prop"
                                    :width="item.width"
                                    :label="item.label"
                                    :align="item.align"
                                >
                                    <template
                                        slot="header"
                                        slot-scope="scope"
                                    >
                                        <div class="table-head-name">{{scope.column.label}}</div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="p-contianer">
                                <el-pagination
                                    class="p-bar"
                                    @size-change="handleSizeChange1"
                                    @current-change="handleCurrentChange1"
                                    :current-page="currentPage1"
                                    :page-sizes="pageSizes1"
                                    :page-size.sync="pageSize1"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="total1"
                                >
                                </el-pagination>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </flexbox>
    </slide-view>
</template>

<script>
import SlideView from "@/components/SlideView";
import CreateSections from "@/components/CreateSections";
import {
    achivementListAPI,
} from "@/api/personnel/personnel";
import {
    financeSalaryDetailAPI,
} from "@/api/finance/finance";

export default {
    /** 工资详情 */
    name: "system-examine-detail",
    components: {
        SlideView,
        CreateSections,
    },
    props: {
        // 详情信息
        data: Object
    },
    filters: {
    },
    watch: {
        data: function(value) {
            this.getDetail();
        }
    },
    data() {
        return {
            // tabs index
            tabsIndex: 'first',
            // 详情
            showData: {},
            // 加载动画
            loading: false,
            loading1: false,
            // 表的高度
            tableHeight: document.documentElement.clientHeight - 350,
            // 个人绩效
            personAchievements: [],
            personAchievementsTotal: "",
            fieldList: [
                {
                    prop: "record_time",
                    label: "日期",
                    width: 100,
                },
                {
                    prop: "content",
                    label: "业绩内容",
                },
                {
                    prop: "achievement_money",
                    label: "业绩数额(￥)",
                    width: 100,
                    align: "center"
                },
                {
                    prop: "achivement_salary",
                    label: "提成(￥)",
                    width: 100,
                    align: "center"
                },
            ],
            currentPage: 1,
            pageSize: 10,
            pageSizes: [10, 20, 30, 40],
            total: 0,
            // 部门绩效
            structureAchievements: [],
            structureAchievementsTotal: "",
            fieldList1: [
                {
                    prop: "realname",
                    label: "姓名",
                    width: 100,
                },
                {
                    prop: "record_time",
                    label: "日期",
                    width: 100,
                },
                {
                    prop: "content",
                    label: "业绩内容",
                },
                {
                    prop: "achievement_money",
                    label: "业绩数额(￥)",
                    width: 100,
                    align: "center"
                },
                {
                    prop: "achivement_salary",
                    label: "提成(￥)",
                    width: 100,
                    align: "center"
                },
            ],
            currentPage1: 1,
            pageSize1: 10,
            pageSizes1: [10, 20, 30, 40],
            total1: 0,
        };
    },
    computed: {
    },
    mounted() {
        this.getDetail();
    },
    methods: {
        /** 获取工资详情 */
        getDetail() {
            financeSalaryDetailAPI({
                salary_id: this.data["id"]
            })
                .then(res => {
                    if (res.data.status == 10) {
                        res.data.status_text = "待确认"
                    } else if (res.data.status == 20) {
                        res.data.status_text = "已确认"
                    } else {
                        res.data.status_text = ""
                    }
                    this.showData = res.data;
                    this.status = res.data.status;
                    this.getPersonAchivementDetail()
                    this.getStructureAchivementDetail()
                })
                .catch(() => {});
        },
        /** 获取个人绩效详情 */
        getPersonAchivementDetail() {
            this.loading = true;
            achivementListAPI({
                page: this.currentPage,
                limit: this.pageSize,
                salary_id: this.data["id"],
                type: "person"
            })
                .then(res => {
                    this.personAchievements = res.data.list;
                    this.personAchievementsTotal = res.data.totalCount.money;
                    this.total = res.data.dataCount;
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        /** 获取部门绩效详情 */
        getStructureAchivementDetail() {
            this.loading1 = true;
            achivementListAPI({
                page: this.currentPage1,
                limit: this.pageSize1,
                salary_id: this.data["id"],
                type: "structure"
            })
                .then(res => {
                    this.structureAchievements = res.data.list;
                    this.structureAchievementsTotal = res.data.totalCount.money;
                    this.total1 = res.data.dataCount;
                    this.loading1 = false;
                })
                .catch(() => {
                    this.loading1 = false;
                });
        },

        /** 点击关闭按钮隐藏视图 */
        showOperate (status) {
            let arr = [50, -20, -25, -30, -40]
            if (arr.includes(status)) {
                return false
            } else {
                return true
            }
        },
        /** 点击关闭按钮隐藏视图 */
        hideView() {
            this.$emit("hide-view");
        },
        // 更改每页展示数量
        handleSizeChange(val) {
            this.pageSize = val;
            this.getPersonAchivementDetail();
        },
        // 更改当前页数
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getPersonAchivementDetail();
        },
        // 更改每页展示数量
        handleSizeChange1(val) {
            this.pageSize1 = val;
            this.getStructureAchivementDetail();
        },
        // 更改当前页数
        handleCurrentChange1(val) {
            this.currentPage1 = val;
            this.getStructureAchivementDetail();
        },
    }
};
</script>

<style lang="scss" scoped>
.header {
    width: 100%;
    margin-bottom: 20px;
}
.detail-header {
    position: relative;
    min-height: 60px;
    .header-name {
        font-size: 14px;
        color: #333333;
        flex: 1;
        .delete {
            color: #3e84e9;
            padding: 0 10px;
            font-size: 13px;
            cursor: pointer;
        }
    }
    .header-close {
        display: block;
        width: 30px;
        height: 30px;
        margin-left: 20px;
        padding: 5px;
        cursor: pointer;
    }
}

.detail-header-des {
    color: #999999;
    font-size: 12px;
    .status {
        float: left;
    }
    .status-handle {
        float: right;
    }
}

.detail-body {
    flex: 1;
    overflow-y: auto;
    width: 100%;

    .create-sections {
        padding: 5px 0;
        /deep/ .section-header {
            padding: 5px 0;
        }
    }

    .create-sections-content {
        padding: 0;
    }

    .dialog-content {
        margin-top: 10px;
        .content-items {
            padding: 10px 0;
            align-items: flex-start;
            .content-items-name {
                min-width: 160px;
                margin-right: 10px;
                color: #777;
                flex-shrink: 0;
                text-align: right;
            }
            .content-items-value {
                flex: 1;
                font-weight: 600;
            }
        }
    }
}
.my-label {
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 10px;
    .log-title {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 10px;
    }
    .log-item {
        margin-top: 10px;
        color: #666;
        font-size: 13px;
        line-height: 1.6;
        align-items: flex-start;
        .log-name {
            margin-right: 10px;
        }
        .log-content {
            flex: 1;
            text-align: justify;
        }
    }
}

// 详情
.d-view {
    position: fixed;
    width: 50%;
    top: 60px;
    bottom: 0px;
    right: 0px;
}
/** 将其改变为flex布局 */
.crm-create-box {
    display: flex;
    flex-wrap: wrap;
}

.crm-create-item {
    flex: 0 0 100%;
    flex-shrink: 0;
    padding-bottom: 10px;
}

// 占用一整行
.crm-create-block-item {
    flex: 0 0 100%;
    flex-shrink: 0;
    padding-bottom: 10px;
}

.el-form-item /deep/ .el-form-item__label {
    line-height: normal;
    font-size: 13px;
    color: #333333;
    position: relative;
    padding-left: 8px;
    padding-bottom: 0;
}

.el-form /deep/ .el-form-item {
    margin-bottom: 10px;
}

.el-form /deep/ .el-form-item.is-required .el-form-item__label:before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
    position: absolute;
    left: 0;
    top: 5px;
}
.el-table /deep/ thead th{
    background-color: #f2f2f2;
}
.el-table  /deep/ th > .cell{
    height: 23px;
}
.el-table  /deep/ th div{
    line-height: 26px;
}
.total-label{
    font-size: 14px;
    line-height: 30px;
    margin-bottom: 10px;
}
.p-contianer {
    position: relative;
    background-color: white;
    height: 44px;
    .p-bar {
        float: right;
        margin: 5px 100px 0 0;
        font-size: 14px !important;
    }
}
</style>

